import Image from "next/image"
import Link from "next/link"

import { Button } from "~/registry/default/ui/button"
import { Input } from "~/registry/default/ui/input"
import { Label } from "~/registry/default/ui/label"

export const description =
   "A login page with two columns. The first column has the login form with email and password. There's a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image."

export const iframeHeight = "800px"

export const containerClassName = "w-full h-full p-4 lg:p-0"

export default function Dashboard() {
   return (
      <div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
         <div className="flex items-center justify-center py-12">
            <div className="mx-auto grid w-[350px] gap-6">
               <div className="grid gap-2 text-center">
                  <h1 className="text-3xl font-bold">Login</h1>
                  <p className="text-muted-foreground text-balance">
                     Enter your email below to login to your account
                  </p>
               </div>
               <div className="grid gap-4">
                  <div className="grid gap-2">
                     <Label htmlFor="email">Email</Label>
                     <Input
                        id="email"
                        type="email"
                        placeholder="m@example.com"
                        required
                     />
                  </div>
                  <div className="grid gap-2">
                     <div className="flex items-center">
                        <Label htmlFor="password">Password</Label>
                        <Link
                           href="/forgot-password"
                           className="ml-auto inline-block text-sm underline"
                        >
                           Forgot your password?
                        </Link>
                     </div>
                     <Input id="password" type="password" required />
                  </div>
                  <Button type="submit" className="w-full">
                     Login
                  </Button>
                  <Button variant="outline" className="w-full">
                     Login with Google
                  </Button>
               </div>
               <div className="mt-4 text-center text-sm">
                  Don&apos;t have an account?{" "}
                  <Link href="#" className="underline">
                     Sign up
                  </Link>
               </div>
            </div>
         </div>
         <div className="bg-muted hidden lg:block">
            <Image
               src="/placeholder.svg"
               alt="Image"
               width="1920"
               height="1080"
               className="size-full object-cover dark:brightness-[0.2] dark:grayscale"
            />
         </div>
      </div>
   )
}
